/* eslint-disable react/jsx-no-duplicate-props */
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {Button, Form} from 'antd';
import {ProFormText} from '@ant-design/pro-form';
import {removeEmptyField} from '../../compoent/emptyFild'

class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            type: '',

        };
    }

    onFinish = (values) => {
        const {type} = this.props
        if (type === '1')
            values.payKey = '';
        let params = removeEmptyField(values);
        if (type === '0') {
            if (params) {
                this.props.add(params).then(res => {
                    this.props.list()
                })
            }
        }
        else if (type === '1') {
            //编辑接口

            if (params) {
                params.id = this.props.record.id
                this.props.upd(params).then(res => {
                    this.props.list()
                })
            }

        }
        this.props.handleCancel()

    };


    render() {
        const {record, type} = this.props
        const bol = !!record;
        console.log('bbbb',bol)
        return (
            <div>
                <Form name="basic"
                      labelCol={{span: 6}}
                      wrapperCol={{span: 14}}
                      initialValues={{remember: true}}
                      onFinish={this.onFinish}
                      autoComplete="off" initialValues={{
                    name: bol ? record.name : '',
                    payKey: bol ? '无法修改' : '',
                }}>

                    <ProFormText rules={[
                        {
                            required: true,
                            message: '请输入支付名称!',
                        },
                    ]} width="md" name="name" label="支付名称" placeholder="请输入支付名称 "/>

                    <ProFormText disabled={bol} tooltip="支付类型参数 请确保唯一性" width="md" name="payKey"
                                 label="类型参数"
                                 placeholder="请输入类型参数"
                                 rules={[
                                     {
                                         required: !bol
                                     },
                                     {
                                         message: '请输入类型参数!',
                                     }
                                 ]}/>

                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="reset">
                            重置
                        </Button>
                        <Button type="primary" htmlType="submit" style={{marginLeft: 30}}>
                            提交
                        </Button>

                    </Form.Item>
                </Form>
            </div>
        )


    }


}

const mapState = state => ({
    ...state.payControl

});

const mapDispatch = dispatch => ({
    ...dispatch.payControl
})

export default connect(mapState, mapDispatch)(Add);